<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <style>
    body {
      padding: 0;
      margin: 0;
      height: 100vh;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: pink;
    }
    .container {
      position: relative;
      font-size: 10px;
      width: 25em;
      height: 25em;
      padding: 1.5em;
      box-shadow: 0 0 5px rgba(0, 0, 0, 1);
      border-radius: 1em;
      overflow: hidden;
    }
    .container::before {
      content: "";
      position: absolute;
      width: 150%;
      height: 150%;
      transform: translate(-20%, -20%) rotate(-45deg);
      background: repeating-linear-gradient(
        white 0%,
        white 0.75em,
        hotpink 0.75em,
        hotpink 1.5em
      );
      z-index: -1;
      animation: diagonalRun 30s linear infinite;
    }
    .container::after {
      content: "";
      position: absolute;
      width: calc(100% - 3em);
      height: calc(100% - 3em);
      top: 1.5em;
      left: 1.5em;
      border-radius: 1em;
      box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1),
        inset 0 0 5px rgba(0, 0, 0, 1);
      z-index: -1;
      background: white;
    }
    .container p {
      position: absolute;
      top: 50%;
      font-size: 12em;
      font-family: sans-serif;
      font-weight: bold;
      margin: 0;
      color: rgba(240, 8, 135, 0.8);
      transform: translateY(-50%) rotate(-45deg);
      text-shadow: -3px 3px silver;
      text-transform: uppercase;
      user-select: none;
    }
    @keyframes diagonalRun {
      to {
        background-position: 0 50em;
      }
    }
  </style>

  <body>
    <div class="container">
      <p>css</p>
    </div>
  </body>
</html>
